<!-- 其他费用 -->
<template>
  <view class="other-expenses.vue">
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn">
      <view slot="bottom">
        <template>
          <view class="input-product">
            <u--input customStyle="height:100%;width: 90%;margin: auto;" placeholderStyle="color: #fff;" placeholder="搜索"
              border="none" color="#fff" shape="circle" v-model="search" @confirm="searchChange">
              <clIcon slot="prefix" type="icon-sousuo_o" color="#fff" size="25"></clIcon>
            </u--input>
          </view>
        </template>
      </view>
    </hx-navbar>
    <view class="u-page m-t-140">
      <view class="color-list">
        <view class="color-item" @click="go(item)" v-for="item in list" :key="item.value">
          {{ item.name }}
        </view>
      </view>
    </view>
    <!-- 添加结款方式 -->
    <u-popup :show="show" :round="10" mode="center" :closeOnClickOverlay="false">
      <view class="popup-view">
        <view class="title">
          其他费用
        </view>
        <view class="form-view m-b-40">
          <view class="form-item">
            名称:<u--input border="surround" v-model="label.name"></u--input>
          </view>
          <view class="form-item">
            是否启用:<u-switch v-model="label.isEnable"></u-switch>
          </view>
          <view class="form-item">
            备注:<u--input border="surround" v-model="label.remarks"></u--input>
          </view>
        </view>
        <view class="bot-view flex flex-sa">
          <view class="btn" @click="onCencal">
            取消
          </view>
          <view class="btn" @click="onSave">
            保存
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
import {
  listOptions,
  listData,
  addOrUpdateListData
} from "@/apis/bill/bsd";
export default {
  components: {
    clIcon,
  },
  data() {
    return {
      search: null,
      indexList: [],
      config: {
        title: "结款方式",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        rightButton: [
          {
            key: "btn1",
            icon: "&#xe727;",
            position: "left",
          },
        ],
      },
      // 颜色列表
      list: [],
      params: {
        data: {},
        page: {
          current: 1,
          size: 10
        }
      },
      // 显示模态框
      show: false,
      label: {
        "name": "",
        "isEnable": true,
        "remarks": "",
      }
    };
  },
  computed: {},
  onLoad() {
    this.initData();
  },
  methods: {
    go(val) {
      // 返回上一级并传输参数
      uni.navigateBack()
      uni.$emit('otherExpenses', val)
    },
    // 获取数据
    initData() {
      // 1. 查询列表信息
      uni.showLoading({
        title: '加载中'
      })
      listData(this.params).then((res) => {
        if (!res.flag) return;
        this.list = res.data;
        uni.hideLoading()
      }).catch(err => {
        uni.hideLoading()
      });
    },
    scrolltolower() { },
    searchChange() {
      this.indexList = [];
      this.pages.current = 1;
      this.initData();
    },
    clickBtn(item) {
      // console.log("index", item);
      if (item.key === "btn1") {
        // this.$Router.push({
        //   name: "informationWarehouseWarehouseDetails",
        // });
        this.show = true
      }
    },
    onCencal() {
      this.label = {
        "name": "",
        "isEnable": true,
        "remarks": "",
      }
      this.show = false
    },
    onSave() {
      addOrUpdateListData([this.label]).then(res => {
        if (!res.flag) return;
        this.label = {
          "name": "",
          "isEnable": true,
          "remarks": "",
        }
        this.show = false
        this.initData()
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.input-product {
  width: 95%;
  padding: 0 20upx;
  margin: 30upx auto;
  border: 1px solid #fff;
  border-radius: 50upx;
  height: 70upx;
  line-height: 70upx;
  color: #fff;
  display: flex;
}

.color-list {
  background-color: #fff;

  .color-item {
    height: 80rpx;
    font-size: 28rpx;
    padding: 0 20rpx;
    border-bottom: 1rpx solid #eee;
    line-height: 80rpx;
  }
}
</style>
